$(document).ready(function() {
    var $simg = $(".bigbox");
    var $mov = $(".showbox");
    var $bigImg = $(".showlarge");
    var $img = $(".showlarge img");
    $(".goods-list-img img").mouseenter(function() { //鼠标悬浮在不同的产品小图片时外加黑色边框并且主图将其显示出来
        $(".goods-list-img img").css({
            "border": "2px solid #FFF"
        });
        $(this).css({
            "border": "2px solid #000"
        }); //this获取的是当前鼠标移入的元素，设置黑色边框
        var imgsrc = $(this).attr("src"); //获取当前鼠标移入元素的src属性值将其赋值给主图元素
        $(".show").attr("src", imgsrc);
        $(".showlarge img").attr("src", imgsrc); //将鼠标选中的图传给放大图元素的src属性
    });

    $simg.hover(function() {
        $mov.show();
        $bigImg.show();
        $simg.mousemove(function(e) {
            var x = e.clientX;
            var y = e.clientY;
            var _x = $simg.offset().left;
            var _y = $simg.offset().top;

            var _left = x - _x - $mov.width() / 2; //确定方块相对于图片的left
            var _top = y - _y - $mov.height() / 2; //确定方块相对于图片的top
            var simgMovW = $simg.width() - $mov.width();
            var simgMovH = $simg.height() - $mov.height();
            var bimgMovW = $img.width() - $bigImg.width();
            var bimgMovH = $img.height() - $bigImg.height();
            var ratioW = bimgMovW / simgMovW;
            var ratioH = bimgMovH / simgMovH;
            if (_left < 0) {
                _left = 0;
            } else if (_left > simgMovW) {
                _left = simgMovW;
            }
            if (_top < 0) {
                _top = 0;
            } else if (_top > simgMovH) {
                _top = simgMovH;
            }

            $mov.css({
                "left": _left,
                "top": _top
            });
            $img.css({
                "left": -_left * ratioW,
                "top": -_top * ratioH
            })
        })
    }, function() {
        $mov.hide();
        $bigImg.hide();
    })

})